<template>
  <div class="herd_dex">
    <div class="herd_bud"></div>
    <div class="herd_bt">新增供货商详情</div>
    <div class="OperaTion_Btn">
      <el-button type="info" onclick="window.history.go(-1)" icon="el-icon-back">返回</el-button>
    </div>
    <div class="Rollingbackg">
      <div class="HerD_BackGrd_JiBenxinxi">
        <div class="herd_tow_bt">基本信息</div>
        <p class="Purchase_Division"></p>
        <br />
        <el-form :model="formInline" :inline="true" class="demo-form-inline" label-width="120px">
          <el-form-item label="企业编号">
            <el-input v-model="formInline.Number"></el-input>
          </el-form-item>
          <el-form-item label="企业名称">
            <el-input v-model="formInline.Name"></el-input>
          </el-form-item>
          <el-form-item label="企业地址">
            <el-input v-model="formInline.Address"></el-input>
          </el-form-item>
          <el-form-item label="合作年限">
            <el-input v-model="formInline.hezuonianxian"></el-input>
          </el-form-item>
          <el-form-item label="合作状态">
            <el-input v-model="formInline.hezuo_status"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="formInline.Lianxiren"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="formInline.Tel"></el-input>
          </el-form-item>
          <el-form-item label="信用额度">
            <el-input v-model="formInline.XinYong"></el-input>
          </el-form-item>
          <el-form-item label="到期欠款(元)">
            <el-input v-model="formInline.expirearrears"></el-input>
          </el-form-item>
          <el-form-item label="未到期欠款(元)">
            <el-input v-model="formInline.unexpirearrears"></el-input>
          </el-form-item>
          <el-form-item label="欠款总额(元)">
            <el-input v-model="formInline.zonghe"></el-input>
          </el-form-item>
          <el-form-item label="职务">
            <el-input v-model="formInline.ZhiWu"></el-input>
          </el-form-item>
          <el-form-item label="账户">
            <el-input v-model="formInline.account"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="formInline.password"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- ====================================================================== -->
      <!-- =================== 其他信息 =================== -->
      <!-- ====================================================================== -->
      <div class="herd_tow_brgs">
        <div class="herd_tow_bt">
          <span>其他信息</span>
          <div class="btn_new">
            <el-button type="primary" @click="adds">新增消息</el-button>
          </div>
        </div>
        <div class="tow_hd">
          <p class="Purchase_Division"></p>
          <el-table
            :data="tableDataBa"
            style="width: 98%;background-color:#fff"
            :max-height="170"
            stripe
          >
            <el-table-column label="信息类型" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.messagetype" placeholder="信息类型"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="信息内容" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.messagecontent" placeholder="信息内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="danger" icon="el-icon-delete" @click="shangchu(scope)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- ====================================================================== -->
      <!--================= 合作记录 =================-->
      <!-- ====================================================================== -->
      <div class="HerD_BackGrd_HeZuo">
        <div class="herd_tow_bt">合作记录</div>
        <el-table
          :data="tableData"
          style="width: 97%;background-color:#fff;  margin-left: 15px;"
          :max-height="320"
          stripe
        >
          <el-table-column prop="CreateOn" label="成交时间" align="center"></el-table-column>
          <el-table-column prop="CaiGouNo" label="订单编号" align="center" width="140"></el-table-column>
          <el-table-column prop="thesum" label="订单金额(元)" align="center"></el-table-column>
          <el-table-column prop="prepaid" label="已付金额(元)" align="center"></el-table-column>
          <el-table-column prop="arrears" label="欠款金额(元)" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
              <el-button type="warning" size="small" @click="Application(scope.row)">申请结算</el-button>
              <el-button type="primary" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- =============================================================== -->
      <!-- ============申请结算============= -->
      <!-- ====================================================================== -->
      <el-dialog :visible.sync="dialogTableVisibles" :modal-append-to-body="false" width="1100px">
        <div class="herd_buads"></div>
        <div class="from_cg">结算信息</div>
        <br />
        <p class="Purchase_Division"></p>
        <br />
        <el-form :model="formInline" :inline="true" class="demo-form-inline" label-width="100px">
          <el-form-item label="成交日期">
            <el-input v-model="formInline.overon"></el-input>
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input v-model="formInline.orderno"></el-input>
          </el-form-item>
          <el-form-item label="订单总额">
            <el-input v-model="formInline.thesum"></el-input>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableDataBs"
          style="width: 100%;background-color:#fff"
          height="300"
          :max-height="370"
          stripe
        >
          <el-table-column label="物料名称" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="规格型号" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.model"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="采购单价(元)" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="结算单价(元)" align="center" width="130">
            <template slot-scope="scope">
              <el-input v-model="scope.row.settlement"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="采购数量" align="center" width="130">
            <template slot-scope="scope">
              <el-input v-model="scope.row.purchasenumber"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="退货数量" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.ret"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="小计(元)" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.suotal"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template>
              <el-button type="primary" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <br />
        <div class="from_tow">
          <el-row :gutter="5">
            <el-col :span="7">
              <el-form :model="formInline" class="demo-form-inline" label-width="100px">
                <el-form-item label="退货总费用">
                  <el-input v-model="formInline.totalcost"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="15">
              <el-form :model="formInline" class="demo-form-inline" label-width="400px">
                <el-form-item label="合计结算(元)">
                  <el-input v-model="formInline.total"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <div class="OperaTion_FanHui">
            <el-button type="primary" size="small" @click="dialogTableVisibles = false">确认</el-button>
            <el-button @click="dialogTableVisibles = false" type="info" size="small">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- ====================================================================== -->
      <!--====================== 物料信息 ======================== -->
      <!-- ====================================================================== -->
      <div class="HerD_BackGrd_WuLiao">
        <div class="herd_tow_bt">
          <span>物料信息</span>
          <div class="btn_news">
            <el-button type="primary" @click="add">新增产品</el-button>
          </div>
        </div>

        <div class="tab_tow">
          <p class="Purchase_Division"></p>
          <el-table
            :data="tableDataBy"
            style="width: 100%;background-color:#fff"
            :max-height="260"
            stripe
          >
            <el-table-column prop="WuliaoNo" label="物料代码" align="center" width="180"></el-table-column>
            <el-table-column prop="Name" label="物料名称" align="center"></el-table-column>
            <el-table-column prop="Model" label="物料类型" align="center"></el-table-column>
            <el-table-column prop="Guige" label="规格" align="center"></el-table-column>
            <el-table-column prop="Pirce" label="单价(元)" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="200">
              <template slot-scope="scope">
                <el-button size="small" type="primary" icon="el-icon-document-copy"></el-button>
                <el-button
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  @click="shangchus(scope)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- ====================================================================== -->
      <!-- =================== 价格走势 ============== =-->
      <!-- ====================================================================== -->
      <div class="HerD_BackGrd_JaGezoushi">
        <div class="herd_tow_bt">
          <span>价格走势</span>
          <el-select class="JaGezoushi_Spt" placeholder="合作中"></el-select>
        </div>
        <br />
        <p class="Purchase_Division"></p>
      </div>
      <!-- ====================================================================== -->
      <!-- ================== 评价 ================= -->
      <!-- ====================================================================== -->
      <div class="HerD_BackGrd_PingJia">
        <div class="herd_tow_bt">评价</div>
        <p class="Purchase_Division"></p>
        <div class="five_wbt">
          <el-input type="textarea" :rows="3" placeholder="评价内容" v-model="Evaluate"></el-input>
        </div>
      </div>
    </div>
    <div class="OperaTion_FanHui">
      <el-button @click="OperaTionGM" type="primary">确认</el-button>
      <el-button @click="OperaTionGM" type="info">返回</el-button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      dialogTableVisibles: false,
      options: [
        {
          value: "",
          label: ""
        }
      ],
      dynamicValidateForm: {
        domains: [
          {
            value: ""
          }
        ],
        email: ""
      },
      textarea: "",
      formInline: {},
      tableData: [],
      tableDataBa: [{}],
      tableDataBy: [{}],
      tableDataBs: [],
      Evaluate: "",
      ids: "",
      no: "",
      orderno: ""
    };
  },
  created() {
    this.ids = this.$route.query.ids;
    this.getData();
    this.getList();
    this.getListBy();
  },
  methods: {
    //接口
    getData() {
      var obj = {
        Id: this.ids.Id,
        no: this.ids
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PurchaseManage.asmx/det_GetData?index=1&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.formInline = list.sup;
        this.tableDataBy = list.supmatlis;
      });
    },
    // 动态添加 1
    adds() {
      var list = {
        messagetype: "",
        messagecontent: ""
      };
      this.tableDataBa.unshift(list);
    },
    // 动态删除 1
    shangchu(e) {
      console.log(e);
      this.tableDataBa.splice(e.$index, 1);
    },
    // 动态添加 2
    add() {
      var list = {
        WuliaoNo: "",
        Name: "",
        Model: "",
        Guige: "",
        Pirce: ""
      };
      this.tableDataBy.unshift(list);
    },
    // 动态删除 2
    shangchus(e) {
      console.log(e);
      this.tableDataBy.splice(e.$index, 1);
    },
    //删除
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    //新增
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now()
      });
    },
    //申请结算
    Application(obj) {
      this.dialogTableVisibles = true;
      this.orderno = obj.orderno;
      this.no = this.ids.supplierno;
      var noo = {
        purchaseno: this.orderno,
        supplierno: this.no
      };
      var objs = JSON.stringify(noo);
      axios(
        "/apis/PurchasingManagement.asmx/Det_Purchase?index=21" + "&no=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        for (var i = 0; i < list.length; i++) {
          list[i].suotal = list[i].price * list[i].purchasenumber;
        }
        for (var i = 0; i < list.length; i++) {
          this.formInline.totalcost = list[i].ret * list[i].settlement;
        }
        this.tableDataBs = list;
        this.formInline.orderno = obj.orderno;
        this.formInline.overon = obj.overon;
        this.formInline.thesum = obj.thesum;
        this.formInline.total = 0;
        for (var i = 0; i < list.length; i++) {
          this.formInline.total += list[i].suotal;
        }
      });
    },
    //返回
    OperaTionGM() {
      window.history.go(-1);
    },
    //物料信息
    getListBy() {
      axios("/apis/PurchaseManage.asmx/det_GetData?index=2&jsondata={}").then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          var list = JSON.parse(datas.string.__text);
          this.tableDataBy = list;
        }
      );
    },
    //合作记录
    getList() {
      var obj = {
        Id: this.ids.Id
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PurchaseManage.asmx/det_GetData?index=53&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        console.log(list, 888);
        this.tableData = list;
        //日期解析
        for (var i = 0; i < list.length; i++) {
          var ddd = new Date(parseInt(list[i].CreateOn.substr(6, 13)));
          var y = ddd.getFullYear();
          var m = ddd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var minute = ddd.getMinutes();
          minute = minute < 10 ? "0" + minute : minute;
          var second = ddd.getSeconds();
          second = second < 10 ? "0" + second : second;
          list[i].CreateOn = y + "-" + m + "-" + second;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
//一级头
.herd_bud {
  margin-top: 20px;
  margin-left: 20px;
  height: 20px;
  width: 5px;
  background-color: red;
}
.herd_buds {
  margin-top: -40px;
  margin-left: 10px;
  height: 20px;
  width: 5px;
  background-color: rgb(52, 144, 231);
}
.herd_bt {
  margin-top: -20px;
  margin-left: 30px;
}
.Btn {
  margin-top: -25px;
  margin-left: 90%;
}
.btn_f {
  width: 100px;
}
//基本信息渲染
.HerD_BackGrd_JiBenxinxi {
  height: 45%;
  width: 98%;
  background-color: $white;
  margin-top: 10px;
  margin-left: 15px;
  border: 1px solid $linecolor;
  border-radius: 5px;
}
.herd_tow_bt {
  font-size: $font-size-medium;
  font-weight: bold;
  line-height: 40px;
  margin-left: 20px;
}
.Purchase_Division {
  border: 0.5px solid $linecolor;
  width: 98%;
  margin-left: 10px;
}
//一级渲染
.hd {
  margin-top: 10px;
}
//其他信息渲染
.herd_tow_brgs {
  float: left;
  height: 280px;
  width: 46%;
  background-color: $white;
  margin-top: 10px;
  margin-left: 15px;
  border: 1px solid $linecolor;
  border-radius: 5px;
}
.btn_new {
  float: right;
  margin-right: 50px;
  margin-top: 20px;
}
.btn_news {
  float: right;
  margin-right: 50px;
  margin-top: 20px;
}
.tow_hd {
  margin-top: 30px;
}
//合作记录渲染
.HerD_BackGrd_HeZuo {
  float: right;
  margin-right: 1%;

  margin-top: 10px;
  height: 400px;
  width: 50%;
  background-color: $white;
  border: 1px solid $linecolor;
  border-radius: 5px;
}
// 物料信息渲染
.HerD_BackGrd_WuLiao {
  float: left;
  height: 360px;
  width: 46%;
  background-color: $white;
  margin-top: 10px;
  margin-left: 15px;
  border: 1px solid $linecolor;
  border-radius: 5px;
}
//评价渲染
.HerD_BackGrd_PingJia {
  float: left;
  margin-left: 15px;
  height: 150px;
  width: 46%;
  background-color: $white;
  margin-top: 10px;
  border: 1px solid $linecolor;
  border-radius: 5px;
}
.five_wbt {
  margin-top: 10px;
  margin-left: 25px;
  margin-right: 25px;
}
//价格走势渲染
.HerD_BackGrd_JaGezoushi {
  float: right;
  margin-top: 10px;
  height: 400px;
  width: 50%;
  margin-right: 1%;
  background-color: $white;
  border: 1px solid $linecolor;
  border-radius: 5px;
}
.JaGezoushi_Spt {
  margin-top: 10px;
  float: right;
  margin-right: 30px;
}
.herd_buads {
  margin-top: -40px;
  height: 20px;
  width: 5px;
  background-color: red;
}
.from_cg {
  font-size: $font-size-medium-x;
  font-weight: bold;
  margin-top: -20px;
  margin-left: 10px;
}
.tab_tow {
  margin-top: 30px;
}
.Rollingbackg {
  height: 780px;
  overflow-x: hidden;
}
.OperaTion_Btn {
  margin-left: 93%;
  margin-top: -30px;
}
.OperaTion_FanHui {
  text-align: center;
  margin-top: 10px;
}
</style>